12장 함수

12.1 함수란?

• 수학의 함수는 “입력”을 받아 “출력”을 내보내는 일련의 과정을 정의한 것이다.
• 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다.
• 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

• 함수는 함수 정의를 통해 생성한다.
• 함수 정의만으로 함수가 실행되는 것은 아니다.
• 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 하고, 이를 함수 호출이라고 한다.

12.2 함수를 사용하는 이유

• 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.
• 같은 코드를 중복해서 여러 번 작성하면 코드 수정에 걸리는 시간도 증가하고, 휴먼 에러의 발생 가능성도 높아진다.
• 함수의 사용은 코드 중복을 억제하므로 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
• 적절한 함수 이름은 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있고, 이는 코드의 가독성을 향상시킨다.

12.3 함수 리터럴

• 자바스크립트의 함수는 객체 타입의 값이다.

[!note] > 함수 리터럴의 구성 요소

• 함수 이름
  • 함수 이름은 식별자이므로 네이밍 규칙을 준수해야 한다.

  • 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.

  • 함수 이름은 생략 가능하다. (익명 함수)
• 매개변수 목록
  • 매개변수 목록은 순서에 의미가 있다.
  • 매개변수는 함수 몸체 내에서 변수와 동일하게 취급, 네이밍 규칙을 준수해야한다.
• 함수 몸체
  • 함수 몸체는 함수 호출에 의해 실행된다.

• 함수리터럴도 평가되어 값을 생성하며, 이 값은 객체다.

• 즉, 함수는 객체다.

• 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
• 함수 객체는 일반 객체에는 없는 고유한 프로퍼티를 갖는다. (prototype, length, name, arguments 등등…)

12.4 함수 정의

• 함수를 정의하는 방법은 4가지가 있다.
• 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
• 변수는 선언, 함수는 정의

12.4.1 함수 선언문

• 함수 선언문은 함수 리터럴과 형태가 동일하다.
• 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이다.
• 즉, 값으로 평가되지 않으므로 변수에 할당할 수 없다.

var add = function add(x, y) {
  return x + y;
};

Q. 엥 위 코드 보면 함수 선언문 변수에 할당하고 있는거 아닌가요 A. 똑같이 생겼지만 자바스크립트 엔진은 위를 함수 선언문이 아닌 함수 리터럴 표현식으로 해석한다.

• { } 는 블록문일 수도 있고, 객체 리터럴일 수도 있다. 자바스크립트 엔진은 문맥에 따라 해석한다.
• 기명 함수 리터럴도 함수 선언문일 수도 있고, 함수 리터럴 표현식일 수도 있다. 문맥에 따라 해석된다. (값이 되어야 하는 자리에서는 표현식, 아닌 곳에선 선언문)

function foo() {
  console.log("foo");
}
foo()(
  // foo
 
  function bar() {
    console.log("bar");
  }
);
bar(); // ReferenceError: bar is not defined

• 위는 함수 선언문이고, 아래는 함수 리터럴 표현식이다.

Q. 엥 똑같이 생겼는데 아래는 왜 함수 리터럴 표현식인가요 A. ( ) 는 그룹 연산자이고, 안쪽은 표현식(값)의 자리이다. 따라서 아래쪽은 함수 리터럴 표현식이다.

• 앞서 함수 리터럴에서 살펴봤듯이, 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자이다.

Q. 엥 그럼 변수에 할당하지 않는 이상 함수 호출 못하나요 A. 함수 선언문을 이용하면 자바스크립트 엔진이 암묵적으로 함수 이름과 같은 식별자를 생성하고 함수 객체를 할당해준다.

• 따라서 함수 선언문으로 선언한 위쪽 함수(foo)는 호출이 가능했지만, 함수 리터럴 표현식으로 선언한 아래쪽(bar)함수는 함수를 가리키는 식별자가 없어 ReferenceError를 보인다.
• 위 내용을 보면 알겠지만, 함수 호출은 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.
• 함수 이름과 변수 이름이 같아 함수 이름으로 호출되는 듯하지만 사실은 식별자로 호출된 것이다.

12.4.2 함수 표현식

var add = function (x, y) {
  return x + y;
};
 
console.log(add(2, 5)); // 식별자로 호출! 여기선 함수 이름은 존재하지도 않는다. (익명 함수)

• 함수는 객체다.

• 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다.
• 이처럼 값의 성질을 갖는 객체를 일급 객체라 하고, 자바스크립트의 함수는 일급 객체이다.
• 함수가 일급 객체(값)이라는 것은 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다는 것이다.
• 이러한 함수 정의 방식을 함수 표현식이라 한다.
• 함수 표현식의 함수 이름은 생략할 수 있다. (어차피 값으로 평가돼 변수에 할당되므로)
• 함수 선언문은 값으로 평가되지 않아 변수에 할당할 수 없었으므로 함수 이름을 생략할 수 없었다. (함수 이름을 작성해야만 자바스크립트 엔진이 그걸 보고 암묵적으로 식별자 생성 후 할당해줄 수 있으므로)

12.4.3 함수 생성 시점과 함수 호이스팅

// 함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined
 
// 함수호출
console.log(add(2, 5); // 7
console.log(sub(2, 5); // TypeError: sub is not a function
 
// 함수 선언문
function add(x, y) {
	return x + y;
}
 
//함수 표현식
var sub = function (x, y) {
	return x - y;
};

• 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.

• 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.

• 모든 선언문이 그렇듯 함수 선언문도 런타임 이전에 문맥 형성(실행 컨텍스트)을 위해 자바스크립트 엔진에 의해 먼저 실행돼 함수 객체가 생성되고, 암묵적으로 생성된 식별자에 할당된다.

• 즉 런타임엔 이미 함수 객체가 생성되고 식별자에 할당까지 완료된 상태이므로 함수 선언문 이전에 함수를 참조하거나 호출할 수도 있다.

• 이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.

  [!note] > 함수 호이스팅 vs 변수 호이스팅

  • 런타임 이전에 문맥 형성을 위해 자바스크립트 엔진이 먼저 실행해 식별자를 생성한다는 점에서는 동일
  • 변수는 먼저 undefined로 초기화되고, 이후 런타임에서 값 할당
  • 함수는 함수 객체 생성 및 암묵적 식별자로 할당까지 마침

• 함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다.

• 따라서 런타임에 평가되기 전까지는 undefined로 초기화 되어있고, 함수 표현식 이전에 함수를 호출하면 TypeError가 발생한다.

• 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출해야 한다.

12.4.4 Function 생성자 함수

var add = new Function("x", "y", "return x + y");

• 객체를 생성하는 함수인 생성자 함수를 이용하면 함수 객체를 생성할 수 있다.
• 하지만 이렇게 생성한 함수는 클로저를 생성하지 않는 등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.
• 따라서 이렇게 함수를 생성하는 방식은 일반적이지도 않고 바람직하지도 않다.

12.4.5 화살표 함수

const add = (x, y) => x + y;

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 => 를 사용해 간략한 방법으로 함수를 선언할 수 있다.
• 화살표 함수는 항상 익명 함수로 정의한다.
• 화살표 함수는 내부 동작 또한 간략화 되어 있다.
• 자세한 건 나중에 살펴보자.^^

12.5 함수 호출

12.5.1 매개변수와 인수

• 함수를 실행하기 위해 필요한 값을 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(인자)를 통해 인수를 전달한다.
• 인수는 값으로 평가될 수 있는 표현식이어야 한다.
• 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 일반 변수와 마찬가지로 undefined로 초기화된 이후 인수가 순서대로 할당된다.
• 매개변수의 스코프(유효범위)는 함수 내부다.

function add(x, y) {
  return x + y;
}
 
console.log(add(2)); //NaN

• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. (에러 발생 X)
• 인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined이다.
• 2 + undefined == NaN
• 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시된다.
• 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

function sum() {
  let result = 0;
 
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
 
  return result;
}
 
console.log(sum()); // 0
console.log(sum(1)); // 1
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

arguments 객체를 활용한 가변 인자 함수 예시

function sum(...args) {
  return args.reduce((pre, cur) => pre + cur, 0);
}
 
console.log(sum()); // 0
console.log(sum(1)); // 1
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

보통 Rest 파라미터를 이용해 이런식으로 구현하는 경우가 더 많았던 것 같다.

12.5.2 인수 확인

function add(x, y) {
  return x + y;
}
 
console.log(add(2)); // NaN
console.log(add("a", "b")); // 'ab'

• 타입 검사 또는 인수 개수 확인하는 코드를 작성하거나 매개변수 기본값을 통해 조금 더 안전한 코드 작성 가능
• 타입스크립트를 도입해 컴파일 시점에 부적절한 호출 방지하는 방법도 있다.

12.5.3 매개변수의 최대 개수

• ECMAScript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지 않다.
• 매개변수의 개수는 적을수록 좋으며, 매개변수의 개수를 줄여 함수가 한 가지 일만 하게 만들어야한다.

$.ajax({
  method: "POST",
  url: "/user",
  data: { id: 1, name: "Lee" },
  cache: false,
});

• 3개 이상의 매개변수가 필요하면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다.

12.5.4 반환문

• 함수는 return 키워드와 표현식(반환값) 으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환(return)할 수 있다.

var result = multiply(3, 5);

• 함수 호출은 표현식이다.

  [!note] > 반환문의 두 가지 역할

  1. 함수 실행 중단
  2. 표현식 평가 후 반환

• 반환문을 생략하면 함수는 암묵적으로 undefined를 반환한다.

12.6 참조에 의한 전달과 외부 상태의 변경

// 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = "Kim";
}
 
// 외부 상태
var num = 100;
var person = { name: "Lee" };
 
console.log(num); // 100
console.log(person); // {name: "Lee"}
 
// 원시값은 값 자체가 복사되어 전달되고 객체는 참조값이 복사되어 전달된다.
changeVal(num, person);
 
// 원시값은 원본이 훼손되지 않는다.
console.log(num); // 100
 
// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

• 원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경(재할당을 통한 교체)해도 원본은 훼손되지 않는다.
• 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다.
• 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다.
• 객체의 변경을 추적하려면 옵저버 패턴 등을 이용
• 또는 객체를 불변 객체로 만들어 이용

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
})();

• 함수 정의와 동시에 즉시 호출되고 다시 호출할 수 없는 함수를 즉시 실행 함수라 한다.
• 옛날엔 전역 스코프 오염 방지, 데이터 캡슐화 등등 때문에 종종 썼지만 ES6 이후로는 잘 안쓴다.

12.7.2 재귀 함수

function countdown(n) {
  if (n < 0) return;
  console.log(n);
  countdown(n - 1); // 재귀 호출
}

• 반복 처리를 위해 함수가 자기 자신을 호출하는 함수를 재귀 함수라 한다.

// 함수 표현식
var factorial = function foo(n) {
  // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
  if (n <= 1) return 1;
  // 함수를 가리키는 식별자로 자기 자신을 재귀 호출
  return n * factorial(n - 1);
 
  // 함수 이름으로 자기 자신을 재귀 호출할 수도 있다.
  // console.log(factorial === foo); // true
  // return n * foo(n - 1);
};

• 함수 몸체 내부에서는 함수 이름으로도 자기 자신을 재귀 호출할 수도 있다.
• 재귀 함수 내에는 탈출 조건을 반드시 만들어야한다.

12.7.3 중첩 함수

function outer() {
  var x = 1;
 
  // 중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }
 
  inner();
}
 
outer();

• 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다.
• 중첩 함수를 포함하는 함수는 외부 함수라 부른다.

[!note] ES6부터는 함수 선언문을 if문이나 for문 등의 코드 블록 내에서도 정의할 수 있다.
단, 호이스팅으로 인해 혼란이 발생할 수 있으므로 바람직하지 않다.
중첩 함수는 클로저와 관련이 있다.

12.7.4 콜백 함수

repeat(5, function (i) {
  if (i % 2) console.log(i);
}); // 1 3

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 한다.
• 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.
• 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
• 콜백함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기처리(이벤트 처리, Ajax 통신, 타이머 함수 등) 에 활용되는 중요한 패턴이다.

12.7.5 순수 함수와 비순수 함수

• 어떤 외부 상태에 의존하지도 않고 변경하지도 않는 함수를 순수 함수라고 한다.
• 외부 상태에 의존하거나 외부 상태를 변경하는 함수를 비순수 함수라고 한다.
• 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.

  [!note] > 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최고화해서 불변성을 지향하는 프로그래밍 패러다임이다.